<template>
  <el-dialog
    style="z-index:1000"
    :visible.sync="dialogVisible"
    width="40%"
    center
    @closed="close()"
  >
    <el-carousel
      indicator-position="outside"
      height="600px"
      :autoplay="false"
      :arrow="imageUrls.length > 1 ? 'hover' : 'never'"
    >
      <el-carousel-item
        v-for="url in imageUrls.split(',')"
        :key="url"
      >
        <el-image
          :src="url"
          fit="scale-down"
        ></el-image>
      </el-carousel-item>
    </el-carousel>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'ImagePreview'
})
export default class extends Vue {
  dialogVisible = false;
  imageUrls = '';

  close() {
    this.$destroy();
    (this.$el as any).parentNode.removeChild(this.$el)
  }
}
</script>

<style></style>
<style lang="scss" scoped>
.el-image {
  display: inline !important;
}

.el-loading-parent--relative {
  position: initial !important;
}
</style>
